<template>
  <div>
    <div class="home-bgTop-1etSz">
      <div class="home-homeWrap-1Bimw">
        <div class="home-homeMain-3GZKG">
          <div class="home-centerMain-3QDm0">
            <div class="main_hot-mainHot-1Jirj">
              <div class="main_hot-classifyTab-1A1LM">
                <div class="main_hot-navItem-2jdYB main_hot-navItemActive-13nfx;"><span>评论</span>
                  <div class="main_hot-iconUnActive-5jKjq main_hot-iconActive-2YHzr"></div>
                </div>
              </div>
              <el-row>
                <el-col :span="24">
                  <el-card :body-style="{ padding: '0px' }" style=" border-radius: 20px;">
                    <div class="main_hot-navItem-2jdYB main_hot-navItemActive-13nfx;"><span>按时间</span>
                      <div class="main_hot-iconUnActive-5jKjq main_hot-iconActive-2YHzr"></div>
                      <img alt="图片" class="pic" :model="upic"

                        :src="upic.upic"/>
                      <textarea maxlength="500" placeholder="" class="common-editorText-3sply" v-model="TbComment.cDesc"
                                style="height: 34px;width: 500px; line-height: 34px; padding: 0px 10px; border-radius: 4px;">
                          </textarea>
                      <button type="button" data-disab="0" class="common-editorPostBtn-3Ef2P" @click="talk('cDesc')">评论</button>
                    </div>

                    <el-table
                      :data="findpl"
                      border
                      style="width: 100%">
                      <el-table-column label="评论时间"
                        prop="createTime"
                        width="100">
                      </el-table-column>
                      <el-table-column label="评论人"
                        prop="uName"
                        width="180">
                      </el-table-column>
                      <div class="coomment">
                      <el-table-column label="评论"
                        prop="cDesc"
                      >
                      </el-table-column>
                      </div>
                      <el-table-column width="70">
                        <template slot-scope="scope">
                        <el-button type="success" icon="el-icon-thumb" circle @click="point(scope.$index,scope.row.cId)"></el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.withCredentials=true
export default {
  name: "",
  data() {
    return {
      findpl:[],
      upic:{
        upic:''
      },
      TbComment:{
        cDesc:'',
        dyId: '',
        uId:''
      },
      msg: false,
      items: [],
      newItem: "",
    }
  },
  methods:{
    findpinglun:function(){
      var dyId = this.$route.params.dyId
      console.log(dyId)
      axios.post("http://localhost:7000/live-user/user/findComment",{dyId:dyId}).then(res=>{
        if (res.data.code==200) {
          this.findpl =res.data.data;
        }
      })
    },
    pic:function(){
      axios.post("http://localhost:7000/live-user/user/findPic",).then(res=>{
        if (res.data.code == 200){
          this.upic=res.data.data;
        }
      })
    },
    talk:function(){
     var dyId = this.$route.params.dyId
      console.log(this.TbComment.cDesc)
      axios.post("http://localhost:7000/live-user/user/insertComment", {"dyId":dyId,"cDesc":this.TbComment.cDesc}).then(res=>{
        if (res.data.code == 200){
          const h = this.$createElement;
          this.$message({
            message: h('p', null, [
              h('span', null, '评论 '),
              h('i', { style: 'color: teal' }, '成功'),
            ])
          });
        }
      })
    },
    point:function (cId) {
      console.log(cId)
      axios.post("http://localhost:7000/live-user/user/upPoint",{cId:cId}).then(res=>{
        if (res.data.code == 200){
          const h = this.$createElement;
          this.$message({
            message: h('p', null, [
              h('span', null, '点赞 '),
              h('i', { style: 'color: teal' }, '成功')
            ])
          });
        }
      })
    }

  },
  mounted() {
    this.findpinglun()
    let dyId;
    dyId = this.$route.params.dyId
    this.pic()
  }

}

</script>

<style scoped>

@import url(../assets/font_3jd5z76gzaf/iconfont.css);

.home-homeWrap-1Bimw {
  padding-top: 10px;
  min-height: 910px;
  margin: 0 auto;
  width: 70%;
  background: rgba(43, 52, 59, .15);
}

.home-centerMain-3QDm0 {
  display: inline-block;
  width: 800px;
}

.home-homeMain-3GZKG {
  margin-left: 200px;
  width: 1200px;
  min-height: 890px;
  display: inline-block;
}

.main_hot-mainHot-1Jirj {
  width: 800px;
  display: inline-block;
  margin-right: 10px;
}

.main_hot-classifyTab-1A1LM {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  background-color: #f7f7f7;
  border-radius: 12px;
  margin-bottom: 10px;
}

.main_hot-navItem-2jdYB {
  height: 50px;
  line-height: 50px;
  margin-right: 50px;
  display: inline-block;
  font-size: 16px;
  text-align: center;
  cursor: pointer;

}

.main_hot-iconUnActive-5jKjq.main_hot-iconActive-2YHzr {
  display: block;
  border-radius: 4px 4px 0 0;
  width: 30px;
  height: 4px;
  background: #fa8c16;
  margin: -4.8px auto 0;
}

.pic {
  border-radius: 50%;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-top: 20px;
}

.common-editorPostBtn-3Ef2P {
  background: linear-gradient(224deg, #ffaf00, #ff5d23);
  background-clip: padding-box;
  text-decoration: none;
  border-radius: 8px;
  outline: 0;
  position: absolute;
  right: 0;
  top: -6px;
  display: inline-block;
  width: 75px;
  height: 36px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0);
  margin-top: 78px;
  margin-right: 100px;
}

</style>
